<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page import="com.xnx3.j2ee.Global" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@page import="com.xnx3.wangmarket.admin.G" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<jsp:include page="../iw/common/head.jsp">
    <jsp:param name="title" value="修改网站基本信息"/>
</jsp:include>
<style>
    #input-file {
        position: relative; /* 保证子元素的定位 */
        width: 150px;
        height: 150px;
        background: #eee;
        border: 1px solid #ccc;
        text-align: center;
        margin-left: 50px;
        margin-bottom: 50px;
    }
    #text {
        display: inline-block;
        margin-top: 5px;
        color: #666;
        font-family: "黑体";
        font-size: 18px;
    }
    #file {
        display: block;
        position: absolute;
        top: calc(50% - 55px);
        left: calc(50% - 55px);
        width: 110px; /* 宽高和外围元素保持一致 */
        height: 110px;
        opacity: 0;
        -moz-opacity: 0; /* 兼容老式浏览器 */
        filter: alpha(opacity=0); /* 兼容IE */
        cursor: pointer;
    }
    #uploadForm{
        float: right;
    }
    .layui-btn{
        background-color: #28a44d;
    }
    .layui-form-label{
        font-size: 12px;
    }
    option{
        font-size: 12px;
    }
    .layui-input-block{
        font-size: 12px;
    }
</style>
<%--<form id="form" method="post" class="layui-form" style="padding:20px; padding-top:35px;">--%>
<div style="margin: 0 auto;width: 600px;margin-top: 20px">
    <div class="layui-form-item">
        <label class="layui-form-label">实验名称</label>
        <input type="hidden" id="U_id">
        <div class="layui-input-block">
            <input type="text" id="name" value="${ect.name}" name="name" placeholder="请输入实验名称" class="layui-input">
            <p id="hint" style="color: red;"></p>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">实验过程</label>
        <div class="layui-input-block">
            <%--<input type="text" id="processNarration"--%>
                   <%--placeholder="请输入实验过程" name="processNarration"--%>
                   <%--class="layui-input" value="${ect.processNarration}">--%>
                <textarea id="processNarration" name="processNarration"  maxlength="400" placeholder="请输入实验过程"
                          class="layui-textarea">${ect.processNarration}</textarea>
            <p id="hintNarration" style="color: red;"></p>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">实验结论</label>
        <div class="layui-input-block">
            <%--<input type="text" id="empiricalConclusion"--%>
                   <%--placeholder="请输入实验结论" name="address"--%>
                   <%--class="layui-input" value="${ect.empiricalConclusion}">--%>
                <textarea id="empiricalConclusion" name="empiricalConclusion"  maxlength="400" placeholder="请输入实验结论"
                          class="layui-textarea">${ect.empiricalConclusion}</textarea>
            <p id="hintConclusion" style="color: red;"></p>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">实验类型</label>
        <div class="layui-input-block">
            <select name="id" id="product_type" style="width: 100%;height: 38px;font-size: 12px">
                <c:forEach items="${siteType}" var="type">
                    <option name="type" id="type" value="${type.id}">${type.name}</option>
                </c:forEach>
            </select>
        </div>

    </div>
    <form id="form" method="post" class="layui-form"
          style="padding-top:35px; margin-bottom: 10px; padding-right:35px;">
        <div id="uploadForm" style="margin-bottom: 30px;margin-left: 20px">
           <c:if test="${!empty ect.imgPath}">
               <img src='<%=basePath%>${ect.imgPath}' alt='' id='img' style="top: 20px;width: 200px"/><br>
           </c:if>
            <c:if test="${empty ect.imgPath}">
                <img src='<%=basePath%>${ect.imgPath}' alt='' id='img' style="top: 20px;width: 200px"/><br>
            </c:if>
            <%--<input id="file" type="file"/>--%>
            <%--<button id="upload" type="button" onclick="getUpload()">上传实验图片</button>--%>
        </div>
        <div id="input-file">
            <img style="width: 110px; height: 110px;margin-top: calc(50% - 55px)" src="http://118.25.235.213:8030/image/add.png">
            <input id="file" type="file" />
        </div>
    </form>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" id="subit_btn">保存修改</button>
            <%--<button type="reset" class="layui-btn layui-btn-primary">重置</button>--%>
        </div>
    </div>
</div>
<script type="text/javascript">

    var flag = false;
    $('#file').change(function(){
        getUpload()
    })
    function getUpload() {
        var formData = new FormData();
        var files = document.getElementById("file").files;
        for (var i = 0; i < files.length; i++) {
            formData.append('file', $('#file')[0].files[i]);
        }

        $.ajax({
            url: '<%=basePath %>EmpiricalController/uploadEmpiricalImg.do',
            type: 'POST',
            dataType: "json",
            cache: false,
            data: formData,
            processData: false,
            contentType: false
        }).done(function (res) {
            res.result==1? layer.msg('上传成功', {shade: 0.3}):layer.msg('请选择图片', {icon:0,shade: 0.3});
            document.getElementById("img").src = '<%=basePath%>'+res.path;
        }).fail(function (res) {
            alert(2)
            console("失败");
        });
    }

    $("#subit_btn").click(function () {
        var _data = {
            id: $("#U_id").val(),
            name: $("#name").val(),
            processNarration: $("#processNarration").val(),
            empiricalConclusion: $("#empiricalConclusion").val(),
            product_type: $("#product_type").val(),
            file: $("#file").val(),
        }
        if($("#name").val()==''||$("#price").val()==''||$("#address").val()==''){
            layer.msg('请完整填写输入框', {shade: 0.3})
        }else{
            $.ajax({
                url: "<%=basePath %>EmpiricalController/empiricalAdd.do",
                type: 'post',
                data: _data,
                success: function (obj) {

                    // $.hideLoading();
                    if (obj.result == '1') {
                        layer.msg(obj.info, {shade: 0.3,time:1000},function(){
                            window.location.href='<%=basePath%>EmpiricalController/queryEmpiricalList.do'
                        });
                    } else if (obj.result == '0') {
                        layer.msg(obj.info, {shade: 0.3})
                    } else {
                        layer.msg(result, {shade: 0.3,  time: 2000},function(){
                            cosnole.log(1);
                        })
                    }
                    // layer.close(index);
                    // layer.msg("按钮2回调,参数是:"+index)
                }
            })
        }
    })

    var URL_ID = window.location.search.split('=')[1];
    console.log(URL_ID);
    $('#U_id').val(URL_ID);

    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form;
        //监听提交
        form.on('submit(demo1)', function (data) {
            $.showLoading('数据保存中');
            var d = $("form").serialize();

            $.post("<%=basePath %>EmpiricalController/empiricalAdd.do", d, function (result) {
                $.hideLoading();
                var obj = JSON.parse(result);
                if (obj.result == '1') {
                    parent.layer.msg('操作成功', {shade: 0.3});
                } else if (obj.result == '0'){
                    parent.layer.msg(obj.info, {shade: 0.3})
                } else {
                    parent.layer.msg(result, {shade: 0.3})
                }
                parent.layer.close(index);
            }, "text");

            return false;
        });

    });
</script>

</body>
</html>